<template>
  <div>
       <div class="SearchSongs">
        <!-- <div class="top">
            <h3>vue云音乐</h3>
        </div> -->
        <!-- <MyHeader/> -->
         <header>
        <h2>vue云音乐</h2>
        <div class="search">
            <input type="text" placeholder="请输入歌手、歌曲等"
            v-model="search">
            <div class="iconsearch"></div>
         </div>
        
        <ul>
         <li><router-link to="/">首页</router-link> </li>
            <li><router-link to="/SearchSongs">发现音乐</router-link></li>
         
            <li><router-link to="">音乐人</router-link></li>
            <li><router-link to="">我的</router-link></li>

        </ul>
          <router-view/>
    </header>
        <div class="center">
            <div class="listleft">
                <ol>  
                    <li><span></span><em>清空列表</em> </li> 
                    <li><span></span><em>删除</em> </li>
                    <li><span></span><em>下载</em> </li>
                    <li><span></span><em>添加到</em> </li>
                    <li><span></span><em>收藏</em> </li>
                </ol>
                <ul>
                    <li>11111111111111111</li>
                </ul>
            </div>
            <div class="songright"></div>
        </div>
        <div class="footer">
            <audio src="" autoplay controls loop muted></audio>
        </div>
    </div>
  </div>
</template>

<script>
// import MyHeader from "./MyHeader"
export default {
name:'SearchSongs',
//  components:{MyHeader},
    data (){
        return{

        }
 },
//    mounted:{
       
//    },
}
</script>

<style>
   .SearchSongs {
            width: 100%;
            height: 700px;
            background-color: rgba(0, 0, 0, .3);
            display: flex;
            flex-direction: column;
        }.center {
            width: 100%;
            flex: 1;
            display: flex;
            flex-direction: row;
        }
        
        .center .listleft {
            flex: 2;
            background-color: rgb(239, 255, 170);
        }
        
        .center .songright {
            flex: 1;
            background-color: rgb(215, 255, 196);
        }
        
        .center .listleft {
            display: flex;
            flex-direction: column;
        }
        
        .center .listleft ol {
           
            height: 30px;
            line-height: 30px;
        }
        
        .center .listleft ol li {
             font-family: 'icomoon';
            float: right;
            margin: 3px;
            margin-right: 10px;
            list-style: none;
            border: 2px solid rgb(153, 153, 153);
            margin-bottom: 3px;
        }
        .center .listleft ol li em{
           font-style: normal;
           display: inline-block;
           margin-left: 3px;
        }
        .center .listleft ul {
            flex: 1;
            background-color: rgb(34, 93, 255);
        }
        /* =====================================================  */
        
        .footer {
            height: 80px;
            background-color: rgb(108, 221, 255);
        }
        
        .footer audio {
            width: 80%;
            height: 100%;
        }
</style>